<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	ul{
		margin: 0 auto;
		width: 200px;
		overflow:hidden;
		margin-top: 30px;
		margin-bottom: 30px;
	}
	li{
		list-style: none;
		float: left;
		width: 100px;
		background: #ccc;
		text-align: center;
		line-height: 30px;
		height: 30px;
		cursor: pointer;
	}
	li.select{
		background: #aaa;
	}
	div{
		width: 100%;
		overflow: hidden;
	}
	div p {
		display: block;
		width: 400px;
		margin: 10px auto;
		text-align: center;
		height: 40px;
		line-height: 40px;
	}
	div label input{
		height: 30px;
		line-height: 30px;
		font-size: 20px;
		text-indent: 7px;
	}
	div p span{
	 	margin-left: 10px;
		width: 100px;
		font-size: 20px;
		line-height: 20px;
		height: 20px;
		padding: 10px 5px;
		cursor: pointer;
	}
	div label input.code{
		width: 116px;
	}
	button {
		display: block;
		margin: 0 auto;
		width: 80px;
		height: 30px;
		line-height: 30px;
		font-size: 20px;
		font-family: '微软雅黑';
		border: 0px;
		background: orange;
	}
	.code_yes{
		background: orange;		
	}
	.code_no{
		background: #ccc;	
	}
</style>
</head>

<body>
	<ul>
		<li class="select" onclick="phone(this)">手机注册</li>
		<li onclick="email(this)">邮箱注册</li>
	</ul>
	<div class="phone">
		<form action="" id="phone" method="post">
		<p><label >手机号码：<input type="text" name="phone"/></label></p>
		<p><label >验证码：<input class="code" type="text" name="phone_code"/></label><span id="send_code_phone" class="code_yes">获取验证码</span></p>
		<p><label >密　　码：<input type="password" name="phone_pwd"/></label></p>
		<input type="hidden" name="type" value='1'/>
		<button type="submit">注册</button>
		</form>
	</div>
	<div class="email" style="display: none;">
		<form action="" id="email" method="post">
		<p><label >邮箱号码：<input type="text" name="email"/></label></p>
		<p><label >验证码：<input class="code" type="text" name="email_code"/></label><span id="send_code_email" class="code_yes">获取验证码</span></p>
		<p><label >密　　码：<input type="password" name="email_pwd"/></label></p>
		<input type="hidden" name="type" value='0'/>
		<button type="submit">注册</button>
		</form>
	</div>
</body>
<script type="text/javascript" src="__PUBLIC_ADMIN__lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/Public/Admin/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/Public/Admin/static/h-ui.admin/js/H-ui.admin.js"></script> 
<script type="text/javascript" src="/Public/Admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="/Public/Admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="/Public/Admin/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="/Public/Admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>

<script type="text/javascript" src="/Public/Admin/lib/webuploader/0.1.5/webuploader.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/lib/ueditor/1.4.3/ueditor.config.js"></script> 
<script type="text/javascript" src="/Public/Admin/lib/ueditor/1.4.3/ueditor.all.min.js"> </script> 
<script type="text/javascript" src="/Public/Admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="/Public/Admin/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>

<script type="text/javascript">
	function phone(obj){
		$('li').each(function (){
			$(this).removeClass('select');
			
		});
		$(obj).addClass('select');
		$('.email').hide();
		$('.phone').show();
	}
	function email(obj){
		$('li').each(function (){
			$(this).removeClass('select');
			
		});
		$(obj).addClass('select');
		$('.phone').hide();
		$('.email').show();
	}
	
	$(function(){
		$("#send_code_phone").click(function(){
			// 获取电话号码
			var obj = this;
			var phone = $('input[name=phone]').val();
			if(phone == ''){
				layer.msg('请填写手机号');
			}else{
				if(!isPhone(phone)){
					layer.msg('手机号码格式错误');return;
				}
				$.post('{:U("sendMessage")}',{phone:phone},function(data){
					if(data.status == 1){
						send_code(obj,'send_code_phone');
					}else{
						layer.msg('验证码发送失败，请重试！');return;
					}
					
				});
			}
			
		});
		$("#send_code_email").click(function(){
			// 获取邮箱号码
			var obj = this;
			var email = $('input[name=email]').val();
			if(email == ''){
				layer.msg('请填写邮箱号');
			}else{
				if(!isEmail(email)){
					layer.msg('邮箱格式错误');return;
				}
				$.post('{:U("sendEmail")}',{email:email},function(data){
					if(data.status == 1){
						send_code(obj,'send_code_email');
					}else{
						layer.msg('验证码发送失败，请重试！');return;
					}
					
				});
			}
			
		});
        begin($("#send_code_phone"),'send_code_phone');
        begin($("#send_code_email"),'send_code_email');
    });
	
	function begin(obj,name){
		var send_no = getCookie(name);
        if(send_no != null){
        	obj.removeClass('code_yes').addClass('code_no').text('验证码已发送('+send_no+')');
            var t = setInterval(function(){
                send_no --;
                if(send_no > 0){
                    setCookie(name,send_no,30);
                    obj.text('验证码已发送('+send_no+')');
                }else{
                    clearInterval(t);
                    delCookie(name);
                    obj.removeClass('code_no').addClass('code_yes').text('获取验证码');
                }
            },1000);
            
        }else{
        	obj.removeClass('code_no').addClass('code_yes').text('获取验证码');
        }
	}
    function send_code(obj,name){
        var send_no = getCookie(name);
        if(send_no == null){
            var n = 30;
            setCookie(name,n,30);
            $(obj).removeClass('code_yes').addClass('code_no').text('验证码已发送('+n+')');
            var t = setInterval(function(){
                n --;
                if(n > 0){
                    setCookie(name,n,30);
                    $(obj).text('验证码已发送('+n+')');
                }else{
                    clearInterval(t);
                    delCookie(name);
                    $(obj).removeClass('code_no').addClass('code_yes').text('获取验证码');
                }
            },1000);
        }
    }


    function setCookie(name,value,time){
        time = time * 1000;
        var exp = new Date();
        exp.setTime(exp.getTime() + time);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    }

    function getCookie(name){
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
        if(arr=document.cookie.match(reg)){
            return unescape(arr[2]);
        }else{
            return null;
        }    
    }
    function delCookie(name){
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval=getCookie(name);
        if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
    }
    function isEmail(str){ 
	    	var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; 
	    	return reg.test(str); 
    	}
    function isPhone(str){ 
    	var reg = /^1[34578]\d{9}$/; 
    	return reg.test(str); 
	} 
    $(function (){
	    $("#phone").validate({
			onkeyup:false,
			focusCleanup:true,
			success:"valid",
			submitHandler:function(form){
				var phone = $('input[name=phone]').val();
				var code = $('input[name=phone_code]').val();
				var password = $('input[name=phone_pwd]').val();
				if(phone == ''){
					layer.msg('手机号码不能为空');return;
				}
				if(!isPhone(phone)){
					layer.msg('手机号码格式错误');return;
				}
				if(code == ''){
					layer.msg('验证码不能为空');return;
				}
				if(password == ''){
					layer.msg('密码不能为空');return;
				}
				$(form).ajaxSubmit({
					type:'post',
					url:'{:U("register")}',
					success:function (data){
						if(data.status == 1){
							layer.msg('成功',{icon:6,time:1000});
							setTimeout(function (){
								var index = parent.layer.getFrameIndex(window.name);
								parent.location.reload();
								parent.layer.close(index);
							},1000)
						}
						if(data.status == 2){
							layer.msg(data.msg);
						}
						if(data.status == 0){
							layer.msg(data.msg,{icon:5,time:1000});
						}
					}
				});
			}
		});
	    $("#email").validate({
			onkeyup:false,
			focusCleanup:true,
			success:"valid",
			submitHandler:function(form){
				var email = $('input[name=email]').val();
				var code = $('input[name=email_code]').val();
				var password = $('input[name=email_pwd]').val();
				if(email == ''){
					layer.msg('邮箱不能为空');return;
				}
				if(!isEmail(email)){
					layer.msg('邮箱格式错误');return;
				}
				if(code == ''){
					layer.msg('验证码不能为空');return;
				}
				if(password == ''){
					layer.msg('密码不能为空');return;
				}
				$(form).ajaxSubmit({
					type:'post',
					url:'{:U("register")}',
					success:function (data){
						if(data.status == 1){
							layer.msg('成功',{icon:6,time:1000});
							setTimeout(function (){
								var index = parent.layer.getFrameIndex(window.name);
								parent.location.reload();
								parent.layer.close(index);
							},1000)
						}
						if(data.status == 2){
							layer.msg(data.msg);
						}
						if(data.status == 0){
							layer.msg(data.msg,{icon:5,time:1000});
						}
					}
				});
			}
		});
    })
</script>

</html>






